<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="a" id="b" data="1"></div>

    <script>

        // 标签的自有属性
        //    id   className

        var oDiv = document.querySelector('div');
        console.log(oDiv.id);
        // 获取标签的class属性   class是保留字  className
        console.log(oDiv.className);



        // 标签也有自定义属性  data  
        //   获取标签的自定义属性 getAttribute()
        var v = oDiv.getAttribute('data');
        console.log(v);

        //   给标签设置自定义属性 getAttribute()
        oDiv.setAttribute('qq', 'q');

        // 给对象添加自定义属性 ， --- 在标签上看不见
        oDiv.index = 2;
        console.dir(oDiv)











    </script>

</body>

</html>